<html>
    <head>
        <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAASJ9NWn1NqIKKZ_ifD7y7wBSwz3XteMdrCL_agSgAgwV9RmeIJhQIWoydyplEjJYv7YM1-SWoxz0u6g" type="text/javascript">
        </script>
        <link href="http://www.google.com/uds/css.gsearch.css.css" rel="stylesheet" type="text/css"/>
        <script src="http://www.google.com/uds/solutions/bookbar/gsbookbar.js" type="text/javascript">
        </script>
        <link href="http://www.google.com/uds/solutions/bookbar/gsbookbar.css" rel="stylesheet" type="text/css"/>
        <style type="text/css">
            body, table, p {
                background-image = url( "shelve.png");
                font-family: Arial, sans-serif;
                font-size:
                14px;
            }
            
            td {
                vertical-align: top;
            }
            
            #bookBar {
                width: 400px;
                margin-right: 5px;
                margin-left: 5px;
                padding-top: 50px;
                padding-right: 4px;
                padding-left: 4px;
                padding-bottom: 20px;
            }
        </style>
        <script type="text/javascript">
                        function search( searchTerm ){
                            var bookBar;
                            var barContainer = document.getElementById("bookBar");
                            
                            var options = {
								largeResultSet: true,
								horizontal: true,
								autoExecuteList: {
									cycleTime: GSbookBar.CYCLE_TIME_LONG,
									executeList: ["star trek", "bart simpson"]
								}
							};
                            
                            bookBar = new GSbookBar(barContainer, options);
                            bookBar.execute( searchTerm);
                        }
                        
						// Callaback execution
                        GSearch.setOnLoadCallback(search);
                    
        </script>
    </head>
    <body background="shelve.png">
        <form>
            <table border="0" cellpadding="0px">
                <tr>
                    <td>
                        Enter Book title: 
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="book_input" name="book_input" placeholder="You're Book title" size="28"/>
                    </td>
                    <td>
                        <img src="search_button.png" onclick="search( book_input.value)"/>
                    </td>
                </tr>
            </table>
        </form>
        <table width="210px">
            <td>
                <div id="bookBar" style=" overflow : auto;">
                    Loading...
                </div>
            </td>
        </table>
    </body>
</html>
